<template>
	<view class="page-category">
		<view class="list">
			<view class="classify" v-for="(item, index) in categoryList" :key="index">
				<image class="icon" :src="item.icon" mode="aspectFill"></image>
				<cl-text :size="36" :value="item.name" color="#3D3D3D" block bold></cl-text>
				<cl-text
					:size="28"
					:value="item.tip"
					color="#B9B9B9"
					:margin="[10, 0, 0, 0]"
					block
					bold
				></cl-text>
				<view class="btn">立即进入</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
            categoryList: [
                {
                    icon: '../../static/icon/category/management.png',
                    name: "创业理财",
                    tip: "用小生意赚大钱",
                },
                 {
                    icon: '../../static/icon/category/education.png',
                    name: "亲子教育",
                    tip: "父母必修亲子课",
                },
                 {
                    icon: '../../static/icon/category/work.png',
                    name: "职场提升",
                    tip: "吃出健康免疫力",
                },
                 {
                    icon: '../../static/icon/category/feeling.png',
                    name: "两性情感",
                    tip: "吃出健康免疫力",
                },
                 {
                    icon: '../../static/icon/category/health.png',
                    name: "健康养生",
                    tip: "吃出健康免疫力",
                },
                  {
                    icon: '../../static/icon/category/test.png',
                    name: "心理测评",
                    tip: "父母必修亲子课",
                },
                  {
                    icon: '../../static/icon/category/novel.png',
                    name: "热卖小说",
                    tip: "吃出健康免疫力",
                },
                  {
                    icon: '../../static/icon/category/cartoon.png',
                    name: "精选漫画",
                    tip: "吃出健康免疫力",
                },
            ]
        };
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}
.page-category {
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
        padding-bottom: 40rpx;
		.classify {
			margin-top: 40rpx;
			padding: 32rpx 40rpx;
			box-sizing: border-box;
			width: 326rpx;
			height: 326rpx;
			background: #ffffff;
			box-shadow: 0rpx 16rpx 40rpx rgba(0, 0, 0, 0.03);
			border-radius: 32rpx;
			.icon {
				width: 84rpx;
				height: 84rpx;
			}
			.btn {
                margin-top: 20rpx;
				width: 140rpx;
				height: 50rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
				color: #3d3d3d;
				background: #f1f2f5;
				border-radius: 25rpx;
			}
		}
	}
}
</style>
